<template>
  <el-card>
    <div class="page-tools">
      <!-- 左侧 -->
      <div class="left">
        <div class="tips">
          <i class="el-icon-info" />
          <span>总的记录数:{{ total }}条</span>
        </div>
      </div>
      <div class="right">
        <!-- 右侧 -->
        <slot name="right" />
        <el-button type="warning">导入excel</el-button>
        <el-button type="danger">导出excel</el-button>
        <el-button type="primary">新增员工</el-button>
      </div>

    </div>
    <el-card style="margin-top: 10px;">
      <el-table border :data="list">
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式">
          <template #default="{row}">
            {{ formatHireType(row.formOfEmloyment) }}
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="timeOfEntry" />
        <!-- <el-table-column label="账户状态" /> -->
        <el-table-column label="操作" width="280">
          <template>
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small">分配角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination

          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </el-card>
</template>

<script>
import { getEmployeeList } from '@/api/employees'
import employeesEnum from '@/constant/employees'
const hireType = {}
employeesEnum.hireType.forEach(item => {
  hireType[item.id] = item.value
})
console.log(hireType, 'hireType')

export default {
  data() {
    return {
      list: [],
      page: 1, // 页码值
      size: 5, // 每页显示条数
      total: 0
    }
  },
  created() {
    this.loadEmployeeList()
  },
  methods: {
    formatHireType(value) {
      // console.log(value, 'value-----')
      // const obj = employeesEnum.hireType.find(item => item.id === value)
      // return obj ? obj.value : '未知'
      return hireType[value] || '未知'
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page = 1
      this.size = val
      this.loadEmployeeList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.loadEmployeeList()
    },
    async loadEmployeeList() {
      try {
        const res = await getEmployeeList(this.page, this.size)
        console.log(res, 'getEmployeeList')
        this.list = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
</style>
